import { MouseEventHandler, useState } from 'react';

import { env, innerUrls } from '@/shared/constants';
import { Button, Container } from '@/shared/ui';
import cn from 'classnames';

import { Dropdown } from '../Dropdown';
import cs from './QA.module.scss';

const stopPropagation: MouseEventHandler<HTMLAnchorElement> = (event) => {
  event.stopPropagation();
};

export function QA() {
  const [showingNumber, setShowingNumber] = useState(-1);

  return (
    <Container className={cs.wrapper} small>
      <h2 className={cn('h2', cs.title)} id="qa">
        Вопрос-ответ
      </h2>
      <div className={cs.list}>
        <Dropdown
          questionNumber={0}
          setShowingNumber={setShowingNumber}
          showingNumber={showingNumber}
          title="Когда можно начинать вводить прикорм?"
        >
          <p className={cs.answer}>
            Начинайте вводить прикорм в&nbsp;интервале с&nbsp;4&nbsp;до&nbsp;6&nbsp;месяцев.
            <br />
            Детям, рожденным раньше срока, прикорм вводится в&nbsp;те&nbsp;же сроки.
            <br />
            <br /> Слишком ранний прикорм, как и&nbsp;слишком поздний, могут неблагоприятно отразиться на&nbsp;здоровье
            ребенка. При раннем введении ЖКТ ребенка еще не&nbsp;готов к&nbsp;усвоению &laquo;взрослой&raquo; пищи,
            а&nbsp;слишком поздний влечет за&nbsp;собой риск дефицита полезных веществ, замедление формирования навыков
            жевания и&nbsp;глотания плотной пищи, происходит большая пищевая нагрузка из-за желания ввести все
            и&nbsp;сразу. Также повышается риск аллергических реакций.
            <br />
            <br />
            В&nbsp;каждом отдельном случае стоит проконсультироваться с&nbsp;педиатром!
          </p>
        </Dropdown>
        <Dropdown
          questionNumber={1}
          setShowingNumber={setShowingNumber}
          showingNumber={showingNumber}
          title="Какие признаки готовности малыша к прикорму?"
        >
          <p className={cs.answer}>
            Признаки, которые указывают на&nbsp;готовность малыша к&nbsp;введению прикорма: начинает уверенно держать
            голову, открывает рот при виде ложки, сидит с&nbsp;поддержкой или самостоятельно, проявляет явный интерес
            к&nbsp;еде на&nbsp;общем столе.
            <br />
            <br />
            Однако сам по&nbsp;себе пищевой интерес может появиться даже раньше 4&nbsp;месяцев, при этом ЖКТ ребенка еще
            не&nbsp;будет готов к&nbsp;переходу на&nbsp;&laquo;взрослое&raquo; питание. Лучше ориентироваться
            на&nbsp;возраст и&nbsp;критерии готовности, а&nbsp;до&nbsp;этого момента&nbsp;&mdash; только грудное молоко
            или смесь.
          </p>
        </Dropdown>
        <Dropdown
          questionNumber={2}
          setShowingNumber={setShowingNumber}
          showingNumber={showingNumber}
          title="Какой функционал приложения доступен бесплатно?"
        >
          <p className={cs.answer}>
            Готовая схема прикорма доступна в&nbsp;приложении совершенно бесплатно. Кроме того, можно найти статьи,
            которые помогут лучше понять детей и&nbsp;их&nbsp;потребности. Мы&nbsp;стремимся предоставить всю
            необходимую информацию для осознанного родительства и&nbsp;здорового развития малышей.
            <br />
            <br />
            Также мы&nbsp;предлагаем{' '}
            <Button className="a" href={innerUrls.catalog} link onClick={stopPropagation}>
              обучающие материалы
            </Button>
            , однако за&nbsp;их&nbsp;использование необходимо заплатить. Все вырученные средства от&nbsp;продажи гайдов
            companyName идут на развитие и&nbsp;улучшение сервиса.
          </p>
        </Dropdown>
        <Dropdown
          questionNumber={3}
          setShowingNumber={setShowingNumber}
          showingNumber={showingNumber}
          title="Можно ли получить консультацию специалиста?"
        >
          <p className={cs.answer}>
            Да, в&nbsp;нашем сервисе вы&nbsp;можете получить консультацию специалиста. Только отметим, что наша основная
            цель &mdash; предоставление информационных материалов и&nbsp;советов по&nbsp;различным темам.
            <br />
            <br />
            Если вам требуется более глубокая консультация или экспертное мнение, загляните в&nbsp;раздел
            &laquo;Учимся&raquo;. Там есть возможность получить пошаговый план действий от&nbsp;консультанта
            по&nbsp;детскому сну.
            <br />
            <br /> Eще вы&nbsp;можете обратиться за&nbsp;помощью к&nbsp;педиатрам из&nbsp;GMS Clinic, с&nbsp;которыми
            мы&nbsp;совместно подготовили гайд{' '}
            <Button className="a" href={innerUrls.course(env.courses.feeding)} link onClick={stopPropagation}>
              &laquo;Прикорм и&nbsp;питание с&nbsp;4&nbsp;месяцев до&nbsp;5&nbsp;лет&raquo;.
            </Button>
          </p>
        </Dropdown>
        <Dropdown
          questionNumber={4}
          setShowingNumber={setShowingNumber}
          showingNumber={showingNumber}
          title="Какой банковской картой можно оплачивать?"
        >
          <p className={cs.answer}>
            Для быстрой и&nbsp;надежной покупки через Tinkoff Pay вы&nbsp;можете оплачивать наши материалы
            с&nbsp;помощью любых карт российских банков, включая карты Visa, Mastercard и&nbsp;МИР.
            <br />
            <br />
            Оплата из-за границы доступна только по&nbsp;картам МИР, пройдет&nbsp;ли платеж зависит от&nbsp;банка
            отправителя.
          </p>
        </Dropdown>
        <Dropdown
          questionNumber={5}
          setShowingNumber={setShowingNumber}
          showingNumber={showingNumber}
          title="Как сервис защищает личные данные?"
        >
          <p className={cs.answer}>
            Все личные данные пользователей передаются по&nbsp;защищённым каналам связи хранятся в&nbsp;надежном месте.
            Кроме того, мы&nbsp;регулярно проверяем систему на&nbsp;наличие уязвимостей и&nbsp;активно работаем над
            предотвращением хакерских атак.
            <br />
            <br />
            Если вы&nbsp;хотите быть уверены в&nbsp;безопасности своих данных, мы&nbsp;рекомендуем создавать сложные
            пароли и&nbsp;регулярно их&nbsp;менять. Это поможет избежать неприятных ситуаций и&nbsp;обеспечит
            дополнительный уровень защиты вашего профиля.
          </p>
        </Dropdown>
      </div>
    </Container>
  );
}
